iOS Wow 体验 - 第七章 - 操作图例与触屏人机工学

相比于前几年，如今的触屏设备已经成为市场当中的绝对主流了。不过即便如此，人们对于这类设备的人机物理交互方式仍然缺乏足够清晰的认知与理解。市面上的很多应用虽然在功能方面都相当的酷，但是从人机工学的角度来看，它们的设计却非常不合理。这些应用能够很有效地激发用户的好奇心，吸引他们去下载，但通常会由于用起来相当不舒服而被用户很快地卸载掉。

我们要尽量避免这种情况发生在自己的产品上。花点时间来了解一些这方面的基本常识是很有必要的，本章所要展示的一些基本概念将为你的实际设计工作奠定良好的基础。

对肢体动作的理解

也许这是你初次涉足移动领域的交互设计工作，不过在这之前，你对于其他平台当中的相关设计工作应该已经拥有丰富的经验了。除了要在移动设备的输入及输出方式上做到全面的认知以外，你还必须对人机交互过程当中的肢体动作规律加以理解。回想一下过去的工作经历，你会发现，网站或是桌面设备客户端的相关设计方案当中基本不会涉及到人机物理交互方式等方面的因素。因为桌面设备当中的人机交互方式早已成为一种固化的模式，键盘、鼠标、显示器一直是最基本的输入及输出设备，而且几十年来并没有发生过本质的变化。

而在触屏移动设备领域，你的设计思路必须突破传统的束缚。相比于通过硬件输入设备对软件进行控制操作的模式，我们现在所面对的是更加虚拟化的、具有更高灵活性的交互环境。在这个环境当中，触摸是最基础也是最重要的输入方式，我们几乎可以将这种方式以任何形式运用到任何交互对象上。这就意味着，当你在为移动应用进行设计的时候，你同时也在打造着专门属于这个产品的“键盘”和“鼠标”。这显然给设计师们带来了极高的自由度，但同时也带来了一些挑战。

iPhone

iPhone是当今移动计算领域中的精华产品，它的尺寸规格可以让用户在单手持机的情况下完成多数操作任务。iPhone的机身上只有四个实体硬按键，外加一个静音切换开关。可以说，这些硬按键的布局方案本身就为用户定义了一种最基本的持机方式，不过实际当中的情况远不止这一种。

经过之前几章的学习，你也许已经逐渐了解了应该怎样去打造具有差异化的交互机制，但是我们一直以来关注的话题当中几乎没有涉及到人机物理交互方面的问题。好的设计方案必须能够确保最终的实际产品在用户手中是真正好用的。

对于iPhone，我们可以归纳出六种持机操作方式；在应用的设计工作中，这些方面的因素是必须被考虑进去的。当然，我们并不需要让界面的布局能够完美地适应于每一种方式，但至少应该保证设计方案对其中的一两种是友好的。

图 7-1 纵向单手持机操作

图 7-2 纵向一手持机一手操作

图 7-3 纵向双手持机操作

图 7-4 横向单手持机操作

图 7-5 横向一手持机一手操作

图 7-6 横向双手持机操作

除了这些以外，我们还可以在实际当中发现更多的持机操作方式，不过这六种确实是最具代表性和参考价值的，而且其中的任何一种方式都会对界面布局及手势机制等方面的设计决策造成影响。在操作过程中，手的位置以及屏幕的定向方式也会决定着交互行为的整体效率。在产品前期，我们就应该考虑到这些方面的因素，并通过原型对各种持机操作方式进行充分的测试，以评估设计方案在不同情况下的友好程度。

iPad

iPad的尺寸显然比iPhone大很多，这也使其在人机物理交互方面的表现与iPhone略有不同。而且正像我们在第四章当中提到的，iPad带来的是更加闲适化的计算体验，用户与其进行交互会话的时间通常较长。所以，这款设备所体现出的两点交互特性是我们必须注意的：

• 尺寸规格更大。
• 交互会话时间更长。

出于这两点原因，用户在一般情况下不会通过单手来使用iPad。当然这并不意味着iPad无法通过单手操作，只是双手配合使用的情况更为普遍。接下来的几张图片向我们展示了用户在使用iPad时所惯用的持机操作方式。

图 7-7 纵向一手持机一手操作

图 7-8 纵向双手持机操作

图 7-9 横向一手持机一手操作

图 7-10 横向双手持机操作

对于iPad应用，我们同样要充分地考虑到用户最可能采用的持机操作方式，并以此来验证设计方案的友好性。

界面元素的布局

在第二章里，我们曾经在直接操纵的概念当中提到了界面元素的尺寸及间距方面的设计问题。为触屏设备打造用户界面设计方案的时候，有两点基本的设计要素是必须考虑到的：

• 尺寸：触控元素的目标区域范围。
• 间距：触控元素彼此之间的距离。

在iPhone时代之前，我也许会对触控元素的目标区域尺寸做出非常明确的建议。其实直到几年前，我们仍习惯于为触控目标设定一个比较大的“最小尺寸”，以避免因为触控元素过小所造成的可用性方面的问题。曾经，这个最小尺寸大致在1cm2到1.5cm2之间。想想看，这可是一个不小的按钮了，甚至比iPhone中的应用图标还要大。另外，在多个触控元素的间距方面，曾经的大致原则是，无论横向还是纵向，彼此之间至少要保持1cm的距离。过去的这些习惯性做法也是有一定道理的，因为当时的触屏技术在感应定位方面还无法做到非常精确，很多时候，一个交互对象的有效触控区域距离其本身会有一定程度的偏差。所以当时的用户界面设计方案必须将这些方面的因素都考虑进去。另外，大尺寸的触控目标区域也可以为用户带来某种心理上的保障，使操作感更加舒适稳妥。

如今，这种情况已经得到了一定程度的改善，但界面元素的触控区域尺寸及间距方面的问题依然是我们在打造交互体验的过程中所必须考虑到的。iOS设备所采用的电容触屏技术在感应定位方面具有高度的精确性。也许你已经注意了，当使用iPhone浏览网页的时候，即使页面一直保持在默认的缩小状态，你依然可以通过小指来准确地点击到那些已经被缩得很小的链接或按钮。在这种情况下，我们其实并不需要在触控元素目标区域的最小尺寸上做过多的纠结；相比而言，触控元素之间的间距才是界面布局方案当中的关键因素。

触控元素彼此之间的距离越近，用户误操作的可能性就越大。关于间距的把握，我们有一个大致的原则，也就是两个触控元素之间的距离应该与它们自身的尺寸成反比。

图 7-11 两个触控元素之间的距离应该与它们自身的尺寸成反比

触控元素的尺寸越大，它们之间的距离就可以越近。反之，小尺寸触控元素之间应该尽量保持较大的间距，因为较小的元素对触摸的准确性要求更高，它们之间的距离必须足够远，才能有效地降低误操作的可能性。而大尺寸交互元素通常是很容易被触摸到的，减小它们之间的距离并不会对操作的准确性造成影响。

略有夸张的讲，如果界面当中只有一个交互对象，那么即使将它设计为1像素见方，单从触控操作的角度来说也是完全可行的。

反馈机制

时间与状态的概念往往会在交互方案当中起到至关重要的作用。我们已经在本书之前的相关章节当中对那些以时间及状态变化为主导的解决方案的进行了分析。现在，我们将围绕着这两个概念深入思考系统对于交互操作的响应方式。

系统应该以怎样的方式对用户的输入行为产生有效的反馈，这是我们在设计方案当中必须明确定义出来的。反馈的本质作用是确认某个交互事件已经发生，并且已经被系统所捕获。通常，交互对象会发生一些简单的状态变化，以此从视觉上体现出反馈的效果。

另外，从情感化的角度来看，当用户以正确的方式执行了某种交互操作时，系统所做出的恰当的反馈还可以给用户带来积极可靠的体验与感受。所以，在我们从整体上为产品打造具有差异化的交互模型的同时，还必须对这些细节当中的交互机制保持必要的敏感度。某些特定的交互模式当中的细节行为特征会对整体设计方案产生一定程度的影响，对于这些，我们要做到心知肚明。

举个简单的例子，那些刚刚涉足移动领域的设计师们通常会因为触屏设备当中的交互对象缺少“悬停”状态属性而感到不满，因为在传统设备当中，这类状态属性往往可以被赋予很多出彩的效果。实际上，悬停也只是系统反馈机制当中的一种，在触屏设备中，我们完全可以在其他细节当中通过更具创造性的方式来实现类似的反馈效果。让我们想一想触屏设备当中最基本的交互事件——触摸。在多数情况下，系统对于触摸事件的反馈就是使交互对象所呈现出的状态发生某种简单的变化。如果说这种机制当中缺乏某种创新性，那么根本原因就在于这个反馈机制的思路并没有摆脱传统设备的束缚，它所体现出来的仍然是“鼠标按下”或“鼠标点击”这样的行为模式。为了降低应用开发的难度，iOS预先定义了一系列最基本的反馈行为模式，并使它们成为交互元素自身所固有的一种属性；这种做法在某种程度上也局限了反馈机制的创意空间。

我们生活在一个由各种严整的物理定律所支配着的世界当中。在设计用户界面的时候，我们也应该从自己在现实世界所获得的经验当中汲取灵感，为各种交互事件增添更多逼真而且有趣的视觉效果。我们不仅可以改变交互对象的外观，同时还可以改变它们在状态变化过程当中的视觉效果。有没有什么动画模式可以使元素表现出力反馈的效果？当然有。我们能否同样为手势操作增添某种即时的视觉回馈效果？当然可以。

如果你准备在设计方案中打造更加真实而健壮的交互反馈机制，那么一定要注意对时间概念的把握。这里所说的时间概念，包括反馈行为对于触发事件的响应速度，反馈行为的呈现速度，及其能够持续的时长。这些方面的因素都是非常重要的，因为你必须了解反馈机制会对整个交互流程产生怎样的影响。如果用户需要花费很多时间等待反馈动画效果结束才能进入工作流的下一个环节，那么他们很有可能因此而感到受挫。对于设计方案当中这类细节之处所带来的体验效应，我们要时刻保持关注。

对隐藏元素的提示

很多时候，我们需要在设计方案当中对界面元素的呈现方式进行管理。这里，我们主要指那些在状态方面具有高度可变性的交互对象。以隐藏控制元素为例，用户必须首先完成某些的操作，才能使这些控制元素呈现出来并真正进入工作状态。这类设计方案当中通常存在一些弊端，因为在默认状态下，界面会将一些重要的控制元素隐藏起来，从可用性的角度来讲，这似乎是一种违反直觉的设计方式。但在很多情况下，这种方案又是非常有用的。

要使这类设计方案获得成功，我们必须向用户提供足够的引导与提示，使他们明白应该以怎样的方式调出这些隐藏控制元素。比较简单的做法，就是在应用第一次启动的时候，保持这些元素的可见性，让用户了解到这些控制元素的存在；然后再通过某种动画效果将这些元素隐藏起来。当然，你还可以在应用第一次启动时，以某种可视化的方式明确地向用户介绍用来调出隐藏控制元素的具体操作方法。对于那些必须通过特殊的手势才能使隐藏元素显示出来的界面来说，这种明确的引导会特别有用。

除了在首次启动的过程中进行必要的引导之外，我们还可以在界面当中使用半透明小图标或其他形式的视觉提示，让用户了解在这个位置附近有处于隐藏状态的控制元素。此外，时间和状态的概念也可以在这里发挥作用。例如，我们可以让这种视觉提示在工作流进行到某些特定的环节时呈现给用户，或是让它们按照预设的频率反复出现。

当用户已经熟悉了应用的使用方法之后，这些提示和引导就失去存在的必要了。最好在应用内部或是iOS全局的设置当中为用户提供一种可以管理这些提示的机制。不过不要忘记，你同样需要以某种方式告诉用户这些操作提示是可以在设置当中被关闭或再次打开的。

总结

让我们来回顾一下在本章当中所学到的东西：

为移动应用进行设计的时候，要考虑到设备自身的物理属性，并理解这些属性会对应用的实际使用方式造成怎样的影响。

界面元素触控区域的尺寸和间距是我们在打造交互体验时所必须考虑到的重要因素。触控元素的尺寸越大，它们之间的距离就可以越近。反之，小尺寸触控元素之间应该尽量保持较大的间距，才能有效地降低误操作的可能性。

我们可以通过很多方式将动态的视觉反馈效果整合到应用的界面元素当中。在我们从整体上为产品打造具有差异化的交互模型的同时，还必须对细节当中的交互机制保持必要的敏感度。

如果你的界面设计方案当中包含隐藏控制元素，那么一定要向用户提供足够的引导与提示，使他们明白应该以怎样的方式调出这些隐藏控制元素。